<!-- 领券中心与新人券中心公用 -->

<template>
  <view class="view">
    <view class="wrapper">
      <image src="../../static/get-coupon.svg" class="title"></image>
      <mCoupon :coupon="item" v-for="item in coupons" :key="item.id">
        <view
          class="exchange-btn"
          :class="{ disabled: item.surplus_count === 0 || searchCouponId(item.id) }"
          @click="handleReceive(item.id, item.surplus_count)"
        >
          {{ searchCouponId(item.id) ? '已领取' : item.surplus_count === 0 ? '已领空' : '领取' }}
        </view>
      </mCoupon>
    </view>
  </view>
</template>

<script>
import mCoupon from '@/components/mCoupon/index'

export default {
  components: {
    mCoupon
  },

  data() {
    return {
      // coupons: [
      //   {
      //     id: 1,
      //     name: '全平台折扣券',
      //     details: '全平台可用', // 使用限制等
      //     money: 0,
      //     coupons: 0.8,
      //     limitMoney: 0,
      //     freePostage: false,
      //     validityPeriod: 1, // 有效期限按天计算
      //     points: 3000,
      //     stock: -1,
      //     category: 'coupons'
      //   },
      //   {
      //     id: 2,
      //     name: '桂味荔枝代金券',
      //     details: '限桂味荔枝',
      //     money: 100,
      //     coupons: 0,
      //     limitMoney: 0.01,
      //     freePostage: false,
      //     validityPeriod: 1, // 有效期限按天计算
      //     points: 500,
      //     stock: 3,
      //     category: 'cash'
      //   },
      //   {
      //     id: 3,
      //     name: '怀枝荔枝包邮券',
      //     details: '限怀枝荔枝',
      //     money: 0,
      //     coupons: 0,
      //     limitMoney: 0,
      //     freePostage: true,
      //     validityPeriod: 1, // 有效期限按天计算
      //     points: 200,
      //     stock: 10,
      //     category: 'shipping'
      //   },
      //   {
      //     id: 4,
      //     name: '黑叶荔枝折扣券',
      //     details: '限黑叶荔枝',
      //     money: 0,
      //     coupons: 0.8,
      //     limitMoney: 0,
      //     freePostage: false,
      //     validityPeriod: 1, // 有效期限按天计算
      //     points: 400,
      //     stock: 0,
      //     category: 'coupons'
      //   },
      //   {
      //     id: 5,
      //     name: '黑叶荔枝代金券',
      //     details: '限黑叶荔枝',
      //     money: 10,
      //     coupons: 0,
      //     limitMoney: 100,
      //     freePostage: false,
      //     validityPeriod: 1, // 有效期限按天计算
      //     points: 600,
      //     stock: 2,
      //     category: 'cash'
      //   }
      // ]
      coupons: [],
      userCouponIdList: [],
      i: 0,
      user_id: ''
    }
  },
  onLoad(option) {
    this.i = option.i
    this.user_id = parseInt(getApp().globalData.userInfo.id)
  },
  onShow() {
    this.getData(this.i)
  },

  methods: {
    async getData(i) {
      const { data: res } = await uni.request({
        url: this.$domain.data + '/getCouponList/' + i,
        header: getApp().globalData.header
      })
      if (res.status != 200) {
        this.$checkStatus(res.status)
        return
      }

      this.coupons = res.data

      // 获取用户已领取的优惠券id列表
      const { data: idList } = await uni.request({
        url: this.$domain.data + '/getUserCouponIdList/' + this.user_id,
        header: getApp().globalData.header
      })

      if (res.status != 200) {
        this.$checkStatus(res.status)
        return
      }

      this.userCouponIdList = idList.data
    },
    async handleReceive(id, surplus) {
      if (surplus <= 0) {
        return
      }

      const { data: res } = await uni.request({
        url: this.$domain.data + '/saveUserCoupon',
        header: getApp().globalData.header,
        method: 'POST',
        data: {
          user_id: this.user_id,
          coupon_id: parseInt(id)
        }
      })

      if (res.status != 200) {
        this.$checkStatus(res.status, res.message)
        return
      }

      uni.showToast({
        icon: 'success',
        title: '领取成功'
      })

      this.getData(this.i)
    },
    searchCouponId(id) {
      for (let i = 0; i < this.userCouponIdList.length; i++) {
        const element = this.userCouponIdList[i]

        if (element === id) return true
      }

      return false
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  width: 100%;
  height: 200upx;
}

.wrapper {
  width: 100%;
  padding: 20upx;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 20upx;
}

.exchange-btn {
  background-color: #ff5722;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100upx;
  height: 70upx;
  font-size: 30upx;
  padding: 0;
  border-radius: 10upx;
  color: #ffffff;

  cursor: pointer;
  transition: all 0.3s;

  &.disabled {
    background-color: #cccccc;
    cursor: not-allowed;
  }

  &:hover {
    opacity: 0.9;
  }
}
</style>
